<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./js/ctx.js"></script>
</head>
<body>
<div id="cesiumContainer"></div>
<div id="toolbar"></div>
<script>
    var initCesium = new InitCesium();
    var viewer = initCesium.initViewer('cesiumContainer', {
        shouldAnimate : true
    });

    var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706);
    var url = '../data/models/CesiumMan/Cesium_Man.glb';
    viewer.trackedEntity = viewer.entities.add({
        name : url,
        position : position,
        model : {
            uri : url
        }
    });

    if (!Cesium.PostProcessStageLibrary.isSilhouetteSupported(viewer.scene)) {
        console.log('This browser does not support the silhouette post process.');
    }

    var stages = viewer.scene.postProcessStages;
    var silhouette = stages.add(Cesium.PostProcessStageLibrary.createSilhouetteStage());
    silhouette.uniforms.color = Cesium.Color.LIME;
    var blackAndWhite = stages.add(Cesium.PostProcessStageLibrary.createBlackAndWhiteStage());
    blackAndWhite.uniforms.gradations = 5.0;

    var handler;
    function addMouseOver(stage) {
        handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        handler.setInputAction(function(movement) {
            var pickedObject = viewer.scene.pick(movement.endPosition);
            if (Cesium.defined(pickedObject)) {
                stage.selected = [pickedObject.primitive];
            } else {
                stage.selected = [];
            }
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    }

    function removeMouseOver(stage) {
        handler = handler && handler.destroy();
        stage.selected = [];
    }

    Sandcastle.addToolbarMenu([{
        text : 'Mouse-over Black and White',
        onselect : function() {
            blackAndWhite.enabled = true;
            silhouette.enabled = false;

            removeMouseOver(silhouette);
            addMouseOver(blackAndWhite);
        }
    }, {
        text : 'Mouse-over Silhouette',
        onselect : function() {
            blackAndWhite.enabled = false;
            silhouette.enabled = true;

            removeMouseOver(blackAndWhite);
            addMouseOver(silhouette);
        }
    }]);

</script>
</body>
</html>